<template>
  <!-- 用户反馈 begin -->
  <div class="main main-school" id="main_user_feedback">
    <div class="main-hd">
      <h2>{{ this.$t("m.platformInfo") }}</h2>
    </div>
    <div id="vueTest" class="main-bd">
      <div class="content-wrap">
        <p class="form form-inline">
        </p>
        <div class="items">
          <div class="label">{{$t('m.pst')}}</div>
          <DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" :placeholder="$t('m.pst')" style="width: 200px"></DatePicker>
        </div>
        <div class="items">
          <div class="label">{{$t('m.platName')}}</div>

          <Select v-model="platformId" style="width: 200px;" :placeholder="$t('m.platName')" filterable>
            <Option :value="''">
              {{ this.$t("m.entire") }}
            </Option>
            <Option v-for="item in qudaoList" :value="item.platformId">{{
              item.platformName
            }}</Option>
          </Select>
        </div>

        <div style="margin:20px 0;    clear: both;">
          <Button class="parameter_button" style="margin-right:30px;" @click="recycleQuery()">{{$t('m.recycle')}}</Button>
          <Button class="parameter_button" type="primary" @click="getOnePlatformStatistics">{{$t('m.cháxún')}}</Button>
        </div>
        <!-- 商户列表 begin -->
        <div>
          <h4>
            <p>{{ this.$t("m.yhTongji") }}</p>
          </h4>
          <div class="one">
            <table class="table table-hover table-condensed" border>
              <thead>
                <tr>
                  <td>{{ this.$t("m.channelName") }}</td>
                  <td>{{ this.$t("m.subNum") }}</td>
                  <td>{{ this.$t("m.applyNum") }}</td>
                  <td>{{ this.$t("m.sqNum") }}</td>
                  <td>{{ this.$t("m.numOrder") }}</td>
                  <td>{{ this.$t("m.orderMony") }}</td>
                  <td>{{ this.$t("m.zcCreat") }}</td>
                  <td>{{ this.$t("m.sqObje") }}</td>
                  <td>{{ this.$t("m.zcPayabo") }}</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in statistyList">
                  <td>{{ item.platformName }}</td>
                  <td>{{ item.registerCount }}</td>
                  <td>{{ item.applyCount }}</td>
                  <td>{{ item.applySuccessCount }}</td>
                  <td>{{ item.orderCount }}</td>
                  <td>{{ item.orderMoney }}</td>
                  <td>{{ item.registerApplyRate }}%</td>
                  <td>{{ item.applySuccessRate }}%</td>
                  <td>{{ item.registerOrderRate }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <br />
          <h4>
            <p>{{ this.$t("m.dayTongji") }}</p>
          </h4>

          <table class="table table-hover table-condensed" border>
            <thead>
              <tr>
                <td>{{ this.$t("m.dayTime") }}</td>
                <td>{{ this.$t("m.subNum") }}</td>
                <!-- //注册数-->
                <td>{{ this.$t("m.applyNum") }}</td>
                <td>{{ this.$t("m.sqNum") }}</td>
                <td>{{ this.$t("m.numOrder") }}</td>
                <td>{{ this.$t("m.orderMony") }}</td>
                <td>{{ this.$t("m.zcCreat") }}</td>
                <td>{{ this.$t("m.sqObje") }}</td>
                <td>{{ this.$t("m.zcPayabo") }}</td>
              </tr>
            </thead>
            <tr v-for="(item, index) in statistyList2">
              <td>{{ item.date }}</td>
              <td>{{ item.registerCount }}</td>
              <td>{{ item.applyCount }}</td>
              <td>{{ item.applySuccessCount }}</td>
              <td>{{ item.orderCount }}</td>
              <td>{{ item.orderMoney }}</td>
              <td>{{ item.registerApplyRate }}%</td>
              <td>{{ item.applySuccessRate }}%</td>
              <td>{{ item.registerOrderRate }}%</td>
            </tr>
          </table>
        </div>
      </div>

      <div style="float: right;margin-top:20px;text-align: right;">
        <!-- <span class="kkpager_totalSize">共有{{loan_list_size}}条数据</span> -->
        <Page :total="loan_list_size" :current.sync="page" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="pageChange" @on-page-size-change="handleSizeChange" style="margin: 15px 0;"></Page>
      </div>
      <!-- 商户列表 end -->
    </div>
  </div>
  <!--  </div>-->
  <!-- 用户反馈 end -->
</template>

<script>
export default {
  data () {
    return {
      platformId: '',
      id: '',
      beginDate: '',
      endDate: '',
      statistyList: [],
      statistyList2: [],
      platformList: [],

      loan_list_size: 1,
      loan_list_page: 1,
      loading: true,
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      pageSize: 10,
      pageNumber: 1,
      qudaoList: []
    }
  },
  methods: {
    recycleQuery () {

      this.beginDate = ''
      this.endDate = ''
      this.platformId = ''
      this.getOnePlatformStatistics()
    },
    getOnePlatformList () {
      this.$http.get('/api/laocai/user/statis/platform').then((res) => {
        this.qudaoList = res.body.result.list
      })
    },
    async getOnePlatformStatistics () {
      let param = {}, query = ''

      // var _this = this,param = {id:id};
      // param.id = id || 1;

      param.pageSize = this.pageSize
      param.platformId = this.platformId
      param.beginDate = this.beginDate
      param.endDate = this.endDate
      param.pageNumber = this.pageNumber
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`
        }
      })
      var url = `/api/laocai/user/statis/platform?${query}`
      var url2 = `/api/laocai/user/statis/daily?${query}`
      await this.$http.get(url)
        .then((Response) => {
          var arrr = Response.body.result.list
          if (Response.body.code == 0) {
            arrr.forEach(function (val, index, val_arr) {
              val_arr[index].applySuccessRate = val_arr[index].applySuccessRate * 100
              val_arr[index].registerApplyRate = val_arr[index].registerApplyRate * 100
              val_arr[index].registerOrderRate = val_arr[index].registerOrderRate * 100
            },
              // this.platformList =  Response.body.result.list
              // 新添加page
              this.loan_list_size = Response.body.result.size,
              this.loan_list_page = param.pageIndex
            )
          }
          this.statistyList = arrr
          this.loading = true
        })
      // -----------
      await this.$http.get(url2)
        .then((Response) => {
          var arrr = Response.body.result.list
          if (Response.body.code == 0) {
            arrr.forEach(function (val, index, val_arr) {
              val_arr[index].applySuccessRate = val_arr[index].applySuccessRate * 100
              val_arr[index].registerApplyRate = val_arr[index].registerApplyRate * 100
              val_arr[index].registerOrderRate = val_arr[index].registerOrderRate * 100
            },
              // 先添加page
              this.loan_list_size = Response.body.result.size,
              this.loan_list_page = param.pageIndex

            )
          }
          this.statistyList2 = arrr
          this.loading = true
        })
    },
    xialakuang () {
      var platformId = this.platformId
      var pageNumber = this.pageNumber
      var pageSize = this.pageSize

      var url3 = '/api/laocai/traffic/list' + '?' + 'pageNumber' + '=' + pageNumber + '&' + 'pageSize ' + '=' + pageSize + '&' + 'platformId ' + '=' + platformId

      this.$http.get(url3)
        .then((Response) => {
          this.platformList = Response.body.result.list
        })
    },
    // getAllPlatforms(){//获取所有平台
    // 	var _this = this;
    // 	this.$http.post('/helsinki/admin/daoliu/getAllPlatforms',{}).then(function(res){
    //   	if (res.data.errcode == 0) {
    //       _this.platformList = res.data.data.list;
    //   	}
    //   	}, function(res){
    // 		// _self.$Message.info(res.data.info);
    // 	});
    // },
    timeChange (e) {
      if (typeof (e) === 'undefined') {
        this.beginDate = e[0]
      } else if (typeof (e) === 'object') {
        this.beginDate = e[0]
        this.endDate = e[1]
      }
    },
    pageChange (e) {
      this.pageNumber = e
      this.getOnePlatformStatistics(e)
      this.xialakuang()
    },
    // 每页条数
    handleSizeChange (val) {
      this.pageSize = val
      this.getOnePlatformStatistics()
      this.xialakuang()
    }
  },
  mounted: function () {
    // this.getAllPlatforms();
    this.getOnePlatformList()
    this.getOnePlatformStatistics()
    this.xialakuang()
  },
  watch: {
    // platformId: function () {
    //   this.getOnePlatformStatistics()
    // }
    // platformId:function(){
    //   this.xialakuang();
    // },

  }
}
</script>

<style lang="scss" scoped>
@import "../static/style.css";
h4 {
  clear: both;
  margin: 22px 0px;
}
.items {
  display: inline-block;
  margin-bottom: 20px;
  margin-right: 20px;
  width: 200px;
  float: left;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>
